<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>超级管理员界面</title>
    <link rel="stylesheet" href="static/css4/bootstrap.min.css">
    <script src="static/jq/jquery.js"></script>
    <script src="static/js4/bootstrap.min.js"></script>
    <style type="text/css">
        html body {
            height: 100%;
            margin: 0;
        }

        .header-logo {
            height: 15%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-content {
            min-height: 100%;
            /*margin-bottom:200px;*/
        }

        .bg- {
            background-color: #6495ED;
        }
    </style>

</head>
<body>
<div class="bg-content">
    <div class="header-logo">
        <h1>欢迎来到超级管理员页面</h1>
    </div>
    <nav class="navbar navbar-expand-sm bg- navbar-dark">
        <div class="container">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toSmanagerIndex"
                                        class="nav-link link-light px-2">主页</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toShowManager"
                                        class="nav-link link-light px-2 " aria-current="page">管理员信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toSstushow"
                                        class="nav-link link-light px-2">学生信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toStuShowMistake"
                                        class="nav-link link-light px-2 active">学生缺勤信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpLoad"
                                        class="nav-link link-light px-2">数据上传下载</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpdates"
                                        class="nav-link link-light px-2">修改个人信息</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toUpdates_pw"
                                        class="nav-link link-light px-2">修改密码</a></li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/toShowAuthor"
                                        class="nav-link link-light px-2">权限管理</a></li>
                <li class="nav-item"><a href="#" class="nav-link link-light px-2">About</a></li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <li class="nav-item"><a href="#" class="nav-link link-light px-2"></a></li>
                <li class="nav-item">
                    <text class="nav-link link-light px-2" style="color:#000;"><b>你好，${manager.sname}</b>
                    </text>
                </li>
                <li class="nav-item"><a href="${pageContext.request.contextPath}/logout"
                                        class="nav-link link-light px-2">退出</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-4">
                    <form class="form-inline">
                        <div class="form-group">
                            <select id="selectStu" name="select_value" class="form-control">
                                <option value="1">全部</option>
                                <option value="2">姓名</option>
                                <option value="3">宿舍楼</option>
                                <option value="4">未处理</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input id="search" type="hidden" name="find_value" class="form-control" placeholder="查询内容">
                        </div>
                        <button id="define" type="button" class="btn btn-default">查询</button>
                    </form>
                </div>
            </div>
            <div class="row">
                <table class="table table-hover" id="stu_table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>学号</th>
                        <th>学生</th>
                        <th>宿管</th>
                        <th>宿舍楼</th>
                        <th>时间</th>
                        <th>备注</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <%--        分页条--%>
            <div class="row">
                <div class="col-md-6" id="page_info_area"></div>
                <div class="col-md-4" id="page_area"></div>
                <div class="col-md-2" id="onclick_page"></div>
            </div>
        </div>
        <script type="text/javascript">
            var totalRecord;
            var pageNumRecord;
            var selectStu = $("#selectStu").val();
            var va = $("#Search").val();
            var cdorm1 = "";
            $(function () {
                goto_page(1, selectStu, va);
            });

            //下拉列表
            $("#selectStu").change(function () {
                selectStu = $("#selectStu").val();
                if (selectStu == 1 || selectStu == 4) {
                    $("#search").prop("type", "hidden");
                } else {
                    $("#search").prop("type", "text");
                }
            });


            //对应查询学生信息
            $("#define").click(function () {
                selectStu = $("#selectStu").val();


                if ($("#search").prop("type") == "hidden") {
                    va = "";
                } else {
                    va = $("#search").val();
                }
                if(selectStu==2){
                    cdorm1="";
                    va = $("#search").val();
                }else if(selectStu==3){
                    va = "";
                    cdorm1 = $("#search").val();
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/showStud",
                    data: "pn=" + 1 + "&select_value=" + selectStu + "&find_value=" + va + "&cdorm="+cdorm1,
                    type: "get",
                    success: function (result) {
                        //1.解析并显示员工数据
                        build_manager_table(result);
                        //2.解析并显示分页信息
                        page_info_area(result);
                        build_page_nav(result);
                        to_page(result);

                    }
                });
                // return false;
            });

            //ajax请求，要到分页数据
            function goto_page(pn, selectStu, va) {
                $("#check").prop("checked", false);
                $.ajax({
                    url: "${pageContext.request.contextPath}/showStud",
                    data: "pn=" + pn + "&select_value=" + selectStu + "&find_value=" + va + "&cdorm="+cdorm1,
                    type: "get",
                    success: function (result) {
                        console.log(result.extend.pageInfo.list)
                        $("#selectStu").val(result.extend.selectvalue);
                        va = (result.extend.find_v == "undefined" ? "" : result.extend.find_v);
                        console.log(result);
                        // 1.解析并显示员工数据
                        build_manager_table(result);
                        // 2.解析并显示分页信息
                        page_info_area(result);
                        build_page_nav(result);
                        to_page(result);
                    }
                });
            }

            function build_manager_table(result) {
                $("#stu_table tbody").empty();
                var stus = result.extend.pageInfo.list;
                $.each(stus, function (index, stu) {
                    // var checkbox = $("<td><input type='checkbox' class='check_item' /></td>");
                    var stu_num = $("<td></td>").append(stu.num);
                    var stu_numebr = $("<td></td>").append(stu.number).attr("number_value", stu.number);
                    var stu_name = $("<td></td>").append(stu.sname);
                    var cname = $("<td></td>").append(stu.cname);
                    // var stu_sex = $("<td></td>").append(stu.sex == 1 ? "男" : "女");
                    // var stu_age = $("<td></td>").append(stu.age);
                    // var stu_id = $("<td></td>").append(stu.sid);
                    // var stu_phone = $("<td></td>").append(stu.sphone);
                    var stu_cdorm = $("<td></td>").append(stu.cdorm);
                    // var stu_sdorm = $("<td></td>").append(stu.sdorm);
                    var create_time = $("<td></td>").append(stu.createTime);
                    var stu_mtext = $("<td></td>").append(stu.mtext);
                    //append方法执行后还是返回原来的元素
                    var checkbox;
                    if(stu.statu == 0){
                        checkbox = $("<td><input type='checkbox' class='check_item' statu='0'/>已处理</td>");
                    }else if(stu.statu == 1){
                        checkbox = $("<td><input type='checkbox' class='check_item' statu='1' checked/>已处理</td>");
                    }
                    var edit_btn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append("编辑");
                    var del_btn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn").append("删除");

                    // var btn_td = $("<td></td>").append(edit_btn).append("&nbsp; | &nbsp;").append(del_btn);
                    // $("<tr></tr>").append(checkbox).append(stu_num).append(stu_numebr).append(stu_name).append(stu_sex)
                    //     .append(stu_age).append(stu_id).append(stu_phone).append(stu_cdorm).append(stu_sdorm)
                    //     .append(btn_td).appendTo("#stu_table tbody");
                    $("<tr></tr>").append(stu_num).append(stu_numebr).append(stu_name).append(cname)
                        .append(stu_cdorm).append(create_time).append(stu_mtext).append(checkbox)
                        .appendTo("#stu_table tbody");
                });
            }

            function page_info_area(result) {
                totalRecord = result.extend.pageInfo.total;
                pageNumRecord = result.extend.pageInfo.pageNum;
                $("#page_info_area").empty();
                $("#page_info_area").append("当前为" + result.extend.pageInfo.pageNum + "页数，总共" + result.extend.pageInfo.pages + "页，总共" + result.extend.pageInfo.total + "条记录");
            }

            function build_page_nav(result) {

                $("#page_area").empty();
                var ul = $("<ul></ul>").addClass("pagination");
                var first_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append("首页"));
                if (result.extend.pageInfo.pageNum != 1) {
                    first_page.click(function () {
                        goto_page(1, selectStu, va);
                    })
                }
                var pre_page = $("<li></li>").addClass("page-item").append($("<a></a>").addClass("page-link").append("&laquo;"));
                if (result.extend.pageInfo.hasPreviousPage == true) {
                    pre_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Previous").append("&laquo;"));
                    pre_page.click(function () {
                        var num = result.extend.pageInfo.pageNum - 1;
                        goto_page(num, selectStu, va);
                    });
                } else {
                    pre_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Previous").append("&laquo;"));
                }
                var next_page = $("<li></li>").append($("<a></a>").append("&raquo;"));

                if (result.extend.pageInfo.hasNextPage == true) {
                    next_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Next").append("&raquo;"));
                    next_page.click(function () {
                        var num = result.extend.pageInfo.pageNum + 1;
                        goto_page(num, selectStu, va);
                    });
                } else {
                    next_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").attr("aria-label", "Next").append("&raquo;"));
                }
                var last_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append("末页"));
                if (result.extend.pageInfo.pageNum != result.extend.pageInfo.pages) {
                    last_page.click(function () {
                        goto_page(result.extend.pageInfo.pages, selectStu, va);
                    });
                }
                ul.append(first_page).append(pre_page);
                $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                    var num_page = $("<li class='page-item'></li>").append($("<a class='page-link'></a>").append(item));
                    if (result.extend.pageInfo.pageNum == item) {
                        num_page.addClass("active")
                    }
                    num_page.click(function () {
                        // goto_page(item);
                        goto_page(item, selectStu, va);
                    });
                    ul.append(num_page);
                });
                ul.append(next_page).append(last_page);
                var nav = $("<nav></nav>").attr("aria-label", "Page navigation example").append(ul);
                $("#page_area").append(nav);
            }

            function to_page(result) {
                $("#onclick_page").empty();
                var input = $("<input>").addClass("number col-md-6").attr("type", "number").attr("id", "number").attr("name", "pn").attr("placeholder", "跳转");
                var btn = $("<button></button>").addClass("btn btn-primary btn-sm col-md-4").append("确定");
                btn.click(function () {
                    var num = $(".number").val();
                    if (num < 1) {
                        goto_page(1, selectStu, va);
                    } else if (num > result.extend.pageInfo.pages) {
                        goto_page(result.extend.pageInfo.pages, va);
                    } else {
                        goto_page(num, selectStu, va);
                    }
                });
                $("#onclick_page").append(input).append("&nbsp;").append(btn);
            }

            //完整重置表单
            function form_set(ele) {
                $(ele)[0].reset();
                $(ele).find("*").removeClass("has-error has-success");
                $(ele).find(".help-block").text("");
            }

            function show_validate_msg(ele, status, msg) {
                $(ele).parent().removeClass("has-success has-error");
                $(ele).next("span").text("");
                if ("success" == status) {
                    $(ele).parent().addClass("has-success");
                    $(ele).next("span").text(msg);
                } else if ("error" == status) {
                    $(ele).parent().addClass("has-error");
                    $(ele).next("span").text(msg);
                }
            }
            $(document).on("click",".check_item",function(){
                var number = $(this).parents("tr").find("td:eq(1)").attr("number_value");
                var statu = $(this).attr("statu");
                console.log(statu)
                if(statu==1){
                    statu=0;
                }else if(statu==0){
                    statu=1;
                }
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateStatu",
                    type:"GET",
                    data:"number="+number+"&statu="+statu,
                    success:function(result){
                        if(result.code==200){
                            alert(result.extend.msg);
                        }
                    }
                })
            });
        </script>
    </div>
</div>
<div style="background-color:#fff; height:20px;margin-bottom:0px"></div>
<footer class="footer" style="background-color:#F6F7F8; height:60px;margin-bottom:0px">
    <div class="container text-center">
        <p style="text-align: center;color: #777">
            copy© 2022-2022 舒崇 版权所有
            <br><br>
        </p>
    </div>
    <div id="gotop" style="display: block;"><a class="gotop" draggable="false"></a></div>
</footer>
</body>
</html>
